<template>
	<view>
		<view class="an-notice-box" :style="'background-color: '+bgColor+';'">
			<view class="an-notice-icon">
				<uni-icons
				  :color="color"
				  type="sound"
				  size="14" />
			</view>
			<scroll-view class="an-notice-content" style="width: 100%;">
				<swiper  class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true">
					<swiper-item v-for="(item, index) in list" :key="index" :current-item-id="index" @click="newsOnclick(item.noticeid)" class="an-notice-content-item">
						<view class="swiper-item">
							<text class="an-notice-content-item-text" :style="'color: '+color+';'">
								<text v-if="list.length > 1 && showSerial">{{index+1+'. '}}</text>
								{{item.title}}
							</text>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import uniIcons from '../uni-icons/uni-icons.vue'
	export default {
		components: {
			uniIcons
		},
		props:{
			text: {
				type: Array,
				default: [],
			},
			color: {
				type: String,
				default: '#de8c17'
			},
			bgColor: {
				type: String,
				default: '#fffbe8'
			},
			switchTime: {
				type: Number,
				default: 3
			},
			showSerial: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				number: 0,
				list: [],
				copyText: '',
				show: ''
			};
		},
		mounted() {
               let _this = this;
               _this.list = _this.text;

		},
        watch:{
           text(val){
               if(val){
                    this.list = this.text;
               }
           }
        },
		methods: {
            newsOnclick(noticeid){
                let _this = this;
                uni.navigateTo({
                    url: '/pages/oa/index/datails?noticeid='+ noticeid+'&state='+_this.state
                })
            },
		}
	}
</script>

<style>
	.swiper{
		height: 60upx!important;
	}
	.an-notice-box{
		width: 100%;
		height: 60upx;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
	}
	.an-notice-icon{
		width: 60upx;
		height: 60upx;
		line-height: 56upx;
		text-align: center;
		position: relative;
	}
	.an-notice-content{
		width: calc(100% - 220upx);
		position: relative;
		font-size: 12px;
	}
	.an-notice-content-item{
		width: 100%;
		height: 60upx;
		text-align: left;
		line-height: 60upx;
	}
	.an-notice-content-item-text{
		display: block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
        font-size: 26upx;
	}
	.an-notice-more{
		width: 130upx;
		height: 60upx;
		font-size: 26upx;
		line-height: 60upx;
		text-align: right;
		color: #999;
	}

	@keyframes anotice {
		 0%  {transform: translateY(100%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>
